/* eslint-disable */
import React, { useState, useEffect, useContext } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Icon, Button, Table, Tabs, Modal } from 'antd';
import LoadingComponent from '@/components/PageLoading/index';
import dynamic from 'umi/dynamic';
const { TabPane } = Tabs;

// 涉及到的标签组件按需加载
const RelaForm = dynamic({
  loader: () => import('./tacheTabs/RelaForm'),
  loading: LoadingComponent,
});

function TacheTab(props) {
  const [menuKey, setMenuKey] = useState('RelaForm');
  const [contentList, setContentList] = useState({});

  const tabList = [
    {
      key: 'RelaForm',
      tab: '关联表单',
    },
  ];

  // 子页面根据pageUrl加载页面
  const getRelaForm = () => {
      return (
        <RelaForm />
      );
  };

  useEffect(() => {
    onTabChange('RelaForm');
  }, []);

  useEffect(() => {
    onTabChange('RelaForm');
  }, [props.selectRecord]);


  const onTabChange = key => {
    const contentMap = {
      RelaForm: getRelaForm(),
    };
    setContentList(contentMap);
    setMenuKey(key);
  };

  return (
    <Card
      style={{ width: '100%' }}
      tabList={tabList}
      activeTabKey={menuKey}
      onTabChange={key => {
        onTabChange(key);
      }}
    >
      {Object.keys(contentList).map(key => (
        <div key={key} style={{ display: menuKey === key ? 'block' : 'none' }}>
          {contentList[key]}
        </div>
      ))}
    </Card>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(TacheTab);
